<nz-layout class="layout" style="padding: 0;margin: 0;">

  <nz-layout>
    <nz-sider [nzWidth]="228" style="box-sizing: border-box;background:#fff;position: relative;border-right:1px solid #eee;">
      <div style="width:200px;position: absolute;top:14px;left: 15px;display: flex">
        <input width:160px style="float: left; margin-right: 3px;" type="text" nz-input placeholder="名称" [(ngModel)]="searchs" (onChange)="searchlist(searchs)">
        <button (click)="searchlist(searchs)" nz-button nzType="primary">search</button>
      </div>
      <div style="padding-top: 46px;height:100%;">
        <ul nz-menu [nzMode]="'inline'" style="border: transparent;">
          <li nz-submenu *ngFor="let item of listdata;let i=index;">
            <span title>
              <i class="anticon anticon-user"></i>{{item.className}}
              <nz-badge [nzCount]="signalrService.GetMessageCount(item.id,0)"></nz-badge>
            </span>
            <ul>
              <li *ngFor="let student of item.chatUsers;let j=index;" nz-menu-item (click)="studentchat(student.id,student.personName,item.className,item.id)">{{student.personName}}
                <nz-badge [nzCount]="signalrService.GetMessageCount(item.id,student.id)"></nz-badge>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nz-sider>
    <nz-layout style="height: auto;background: #fff;">
      <nz-content>
        <div style=" width:100%; font-size:14px;font-weight:bold; padding: 6px; background-color: #ef4954;display: inline-block;height: 60;color:white;">
          {{className?'班级：'+className+',姓名：'+talkName:'请选择发送消息对象'}}
        </div>
      </nz-content>
      <nz-content class="scrollTop" style="background:#fff; padding: 24px; height: 76%;overflow-y:auto;padding-bottom:20px;">
          <div *ngFor="let chat of userMsg;let i=index;" style="margin-bottom:10px;">
            <div *ngIf="chat.id">
              <div>
                <img style="margin-right: 4px;width: 54px;border-radius: 50%;" src="http://oq6zg0oj1.bkt.clouddn.com/s01.png" alt="">{{chat.name}}
                <span style="max-width: 30%;word-wrap: break-word;font-size: 16px;box-sizing: border-box;font-size: 16px;color: #444;border: 1px solid #c4a4a7;border-radius: 8px;padding: 12px;">
                  {{chat.message}}</span>
              </div>
            </div>
            <div *ngIf="!chat.id" style="display: flex;justify-content:flex-end">
              <div>
                <div style="align-content: center">
                  <img style="float: right;width:54px;margin: 0 9px;border-radius: 50%;" src="http://oq6zg0oj1.bkt.clouddn.com/s02.png" alt="">
                  <span style="word-wrap: break-word;float: right;max-width: 300px;font-size: 16px;color: #fff;background: #c4a4a7;border: 1px solid #c4a4a7;padding: 12px;border-radius: 8px;">
                    {{chat.message}}</span>

                </div>
              </div>
            </div>
          </div>
      </nz-content>
      <nz-content style="background:#fff; height:24%;border:1px soled #eee;">
        <textarea style="resize:none;width: 100%;height: 100%;border: 1px solid #eee;padding: 24px;height: 100%;" [(ngModel)]="inform"></textarea>
      </nz-content>
      <div style="text-align: right;margin: 24px;background: #fff;">
        <button (click)="chatsent()" nz-button nzType="primary">发送</button>
      </div>
    </nz-layout>
  </nz-layout>
</nz-layout>
